Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
react-modal
Advanced tools
Package description
The react-modal npm package is a library that provides accessible modal dialog components for React applications. It allows developers to create and manage modals in an accessible way, following the WAI-ARIA guidelines for modality. The package offers features such as locking the background scroll when a modal is open, setting the app element, and customizing styles and behaviors of the modal.
Basic Modal Usage
This code demonstrates how to create a basic modal using react-modal. It includes a button to open the modal and a button inside the modal to close it.
{"import React, { useState } from 'react';\nimport Modal from 'react-modal';\n\nconst App = () => {\n const [modalIsOpen, setModalIsOpen] = useState(false);\n\n function openModal() {\n setModalIsOpen(true);\n }\n\n function closeModal() {\n setModalIsOpen(false);\n }\n\n return (\n <div>\n <button onClick={openModal}>Open Modal</button>\n <Modal\n isOpen={modalIsOpen}\n onRequestClose={closeModal}\n contentLabel='Example Modal'\n >\n <h2>Hello</h2>\n <button onClick={closeModal}>close</button>\n <div>I am a modal</div>\n </Modal>\n </div>\n );\n};\n\nexport default App;"}
Custom Styles
This code snippet shows how to apply custom styles to a modal using the 'style' prop.
{"import React from 'react';\nimport Modal from 'react-modal';\n\nconst customStyles = {\n content: {\n top: '50%',\n left: '50%',\n right: 'auto',\n bottom: 'auto',\n marginRight: '-50%',\n transform: 'translate(-50%, -50%)'\n }\n};\n\nconst App = () => {\n return (\n <Modal\n isOpen={true}\n style={customStyles}\n contentLabel='Example Modal'\n >\n <h2>Hello</h2>\n <button>close</button>\n <div>I am a modal with custom styles</div>\n </Modal>\n );\n};\n\nexport default App;"}
Accessibility Features
This example demonstrates how to enhance the accessibility of a modal by setting the app element and using ARIA attributes.
{"import React from 'react';\nimport Modal from 'react-modal';\n\nModal.setAppElement('#yourAppElement');\n\nconst App = () => {\n return (\n <Modal\n isOpen={true}\n aria={{\n labelledby: 'heading',\n describedby: 'full_description'\n }}\n contentLabel='Accessible Example Modal'\n >\n <h2 id='heading'>Hello</h2>\n <div id='full_description'>I am an accessible modal</div>\n <button>close</button>\n </Modal>\n );\n};\n\nexport default App;"}
React Bootstrap provides a Bootstrap-based modal component. It is similar to react-modal but also includes a wide range of other Bootstrap components for use in React.
Material-UI offers a Dialog component that is similar to react-modal. It follows Material Design guidelines and integrates well with other Material-UI components.
reactstrap is another Bootstrap-based library that includes a Modal component. It is similar to react-modal but is specifically designed for use with Bootstrap 4.
Readme
Need feedback to push a new version of react-modal
forward. See issue #881.
Accessible modal dialog component for React.JS
To install, you can use npm or yarn:
$ npm install --save react-modal
$ yarn add react-modal
To install react-modal in React CDN app:
Add this CDN script tag after React CDN scripts and before your JS files (for example from cdnjs):
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-modal/3.14.3/react-modal.min.js"
integrity="sha512-MY2jfK3DBnVzdS2V8MXo5lRtr0mNRroUI9hoLVv2/yL3vrJTam3VzASuKQ96fLEpyYIT4a8o7YgtUs5lPjiLVQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
Use <ReactModal>
tag inside your React CDN app.
The primary documentation for react-modal is the reference book, which describes the API and gives examples of its usage.
Here is a simple example of react-modal being used in an app with some custom styles and focusable input elements within the modal content:
import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';
const customStyles = {
content: {
top: '50%',
left: '50%',
right: 'auto',
bottom: 'auto',
marginRight: '-50%',
transform: 'translate(-50%, -50%)',
},
};
// Make sure to bind modal to your appElement (https://reactcommunity.org/react-modal/accessibility/)
Modal.setAppElement('#yourAppElement');
function App() {
let subtitle;
const [modalIsOpen, setIsOpen] = React.useState(false);
function openModal() {
setIsOpen(true);
}
function afterOpenModal() {
// references are now sync'd and can be accessed.
subtitle.style.color = '#f00';
}
function closeModal() {
setIsOpen(false);
}
return (
<div>
<button onClick={openModal}>Open Modal</button>
<Modal
isOpen={modalIsOpen}
onAfterOpen={afterOpenModal}
onRequestClose={closeModal}
style={customStyles}
contentLabel="Example Modal"
>
<h2 ref={(_subtitle) => (subtitle = _subtitle)}>Hello</h2>
<button onClick={closeModal}>close</button>
<div>I am a modal</div>
<form>
<input />
<button>tab navigation</button>
<button>stays</button>
<button>inside</button>
<button>the modal</button>
</form>
</Modal>
</div>
);
}
ReactDOM.render(<App />, appElement);
You can find more examples in the examples
directory, which you can run in a
local development server using npm start
or yarn run start
.
There are several demos hosted on CodePen which demonstrate various features of react-modal:
FAQs
Accessible modal dialog component for React.JS
The npm package react-modal receives a total of 1,454,686 weekly downloads. As such, react-modal popularity was classified as popular.
We found that react-modal demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.